<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {#加上第7行的标签声明，防止图片不能正常访问#}
    {#meta标签中name=referrer属性主要用于控制客户端发送给服务端的referrer信息，告诉服务端一些客户端的信息，如：来源网页的地址。#}
    <meta name="referrer" content="no-referrer">

    <link rel="stylesheet" href="../static/css/bootstrap.min.css">

    <link rel="stylesheet" href="../static/css/meanmenu.css">

    <link rel="stylesheet" href="../static/css/boxicons.min.css">

    <link rel="stylesheet" href="../static/css/odometer.min.css">

    <link rel="stylesheet" href="../static/css/magnific-popup.min.css">

    <link rel="stylesheet" href="../static/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../static/css/owl.theme.default.min.css">

    <link rel="stylesheet" href="../static/css/nice-select.min.css">

    <link rel="stylesheet" href="../static/css/style.css">

    <link rel="stylesheet" href="../static/css/responsive.css">
    <title>电影列表</title>
</head>
<body>

<div class="loader">
    <div class="d-table">
        <div class="d-table-cell">
            <div class="spinner">
                <div class="rect1"></div>
                <div class="rect2"></div>
                <div class="rect3"></div>
                <div class="rect4"></div>
                <div class="rect5"></div>
            </div>
        </div>
    </div>
</div>


<div class="navbar-area two fixed-top">

    <div class="mobile-nav">
        <a href="/" class="logo">
            <img src="../static/picture/logo.png" alt="Logo">
        </a>
    </div>

    <div class="main-nav">
        <div class="container">
            <nav class="navbar navbar-expand-md navbar-light">
                <a class="navbar-brand" href="/">
                    <img src="../static/picture/logo.png" alt="Logo">
                </a>
                <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="/" class="nav-link dropdown-toggle">主页</a>
                        </li>
                        <li class="nav-item">
                            {#a标签中href对应的是app.py中的装饰器中的/movie参数#}
                            <a href="/movie" class="nav-link dropdown-toggle active">电影Top250</a>
                        </li>
                        <li class="nav-item">
                            <a href="/score" class="nav-link">评分图表</a>
                        </li>

                        <li class="nav-item">
                            <a href="/team" class="nav-link dropdown-toggle">我的团队</a>
                        </li>
                    </ul>
                    <div class="side-nav">
                        <a href="#">Don't point me</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</div>

<!-- table表格显示-start -->
<section class="review-area two ptb-100">
    <div class="review-shape">
        <img src="static/picture/banner-shape6.png" alt="Shape">
    </div>
    <div class="section-title">
        <h2>豆瓣电影Top250</h2>
    </div>
    <div class="container">
        <div class="row">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>电影排名</th>
                        <th>电影封面</th>
                        <th>中文名称</th>
                        <th>外文名称</th>
                        <th>电影评分</th>
                        <th>评价人数</th>
                        <th>一句话影评</th>
                        <th>主创团队</th>
                    </tr>
                </thead>
                <tbody>
                    {#for循环开始，获取电影信息movies#}
                    {% for movie in movies %}
                        <tr>
                            <td>{{ movie[0] }}</td>
                            <td><img src="{{ movie[4] }}" style="width: 70px"></td>
                            <td><a href="{{ movie[3] }}">{{ movie[1] }}</a></td>
                            <td><a href="{{ movie[3] }}">{{ movie[2] }}</a></td>
                            <td>{{ movie[5] }}</td>
                            <td>{{ movie[6] }}人评价</td>
                            <td>{{ movie[7] }}</td>
                            <td>{{ movie[8] }}</td>
                        </tr>
                    {#for循环结束#}
                    {% endfor %}
                </tbody>

            </table>
        </div>
        <div class="pagination-area">
            <ul>
                <li>
                    <a href="#">Prev</a>
                </li>
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">Next</a>
                </li>
            </ul>
        </div>
    </div>
</section>
<!-- table表格显示-end -->


<footer class="pt-70">
    <div class="container">
        <div class="copyright-area">
            <p>
                Copyright &copy; 2022.Company name All rights reserved.
            </p>
        </div>
    </div>
</footer>


<script data-cfasync="false" src="../static/js/email-decode.min.js"></script>
<script src="../static/js/jquery-3.5.1.min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>

<script src="../static/js/form-validator.min.js"></script>

<script src="../static/js/contact-form-script.js"></script>

<script src="../static/js/jquery.ajaxchimp.min.js"></script>

<script src="../static/js/jquery.meanmenu.js"></script>

<script src="../static/js/odometer.min.js"></script>
<script src="../static/js/jquery.appear.js"></script>

<script src="../static/js/jquery.magnific-popup.min.js"></script>

<script src="../static/js/owl.carousel.min.js"></script>

<script src="../static/js/jquery.nice-select.min.js"></script>

<script src="../static/js/thumb-slide.js"></script>

<script src="../static/js/custom.js"></script>
</body>
</html>